<template>
  <div style=" overflow: auto; height: calc(100vh - 100px);">
    <a-modal
      v-model="open"
      :mask="false"
      :footer="null"
      :closable="false"
      :getContainer="getContainer"
      width="100%"
      class="layer-image"
    >
      <img class="imgLayer" :src="imgLayer.src" alt="">
    </a-modal>
    <a-tree
      v-model="checkedKeys"
      checkable
      :selected-keys="[]"
      :expandedKeys.sync="expandedKeys"
      :treeData="treeData"
      @check="checkTree"
      @select="selectTree"
    />
  </div>
</template>

<script>
import { createLayer } from '@/map/libs/layers'

export default {
  name: 'MapTree',
  inject: ['myMap'],
  data () {
    return {
      expandedKeys: ['1', '2', '1-3', '4', '5', '6', '7'],
      treeData: window.mapServiceTree,
      checkedKeys: ['7-1', '7-2'],
      open: false,
      imgLayer: {}
    }
  },
  methods: {
    getContainer () {
      const { map } = this.myMap
      return map.getTarget()
    },
    checkTree (_checkedKeys, e) {
      this.open = false
      const { map } = this.myMap
      if (e.checked) {
        if (e.node.dataRef.url) {
          const layer = createLayer({
            type: e.node.dataRef.type || 'Super',
            url: e.node.dataRef.url
          })
          e.node.dataRef.layer = layer
          e.node.dataRef.zIndex && layer.setZIndex(e.node.dataRef.zIndex)
          map.addLayer(layer)
        }
      } else {
        const layer = e.node.dataRef.layer
        map.removeLayer(layer)
      }
      this.$emit('change', e.node.dataRef, e.checked)
    },
    selectTree (_selectedKeys, e) {
      // if (!e.node.isLeaf2()) return
      // if (e.node.dataRef.type === 'image') {
      //   // this.imgLayer = e.node.dataRef
      //   // this.open = true
      // } else {
      //   this.open = false
      //   if (e.node.checked) {
      //     this.checkedKeys = this.checkedKeys.filter(key => key !== e.node.eventKey)
      //   } else {
      //     e.checked = true
      //     this.checkedKeys.push(e.node.eventKey)
      //   }
      //   this.checkTree(this.checkedKeys, e)
      // // }
      // this.$emit('change', e.node.dataRef, e.checked)
    }
  }
}
</script>

<style lang="less" >

.layer-image {
  .ant-modal-wrap {
    position: absolute;
    z-index: 1;
  }
  .ant-modal {
    top: 0;
    padding-bottom: 0;
    height: 100%;
    .ant-modal-header {
      display: none;
    }
    .ant-modal-content {
      height: 100%
    }
    .ant-modal-body {
      height: 100%;
    }
  }
  .imgLayer {
    display: block;
    margin: 0 auto;
    height: 100%;
  }
}
</style>
